<template>
  <div class="location">
    <div class="top">
      <search-bar
        v-model="searchModel"
        :search-data="searchData"
        :config="searchData"
        style="margin-top: 0; margin-left: -20px; padding-top: 0.2rem"
        @search="handleSearchSubmit"
        @searchReset="handleSearchReset"
      />
    </div>

    <div class="bottom">
      <div class="btn_area" size="medium">
        <el-button type="primary" size="medium" @click="add">新增</el-button>
        <el-dropdown style="margin-left: 0.1rem" @command="handleCommand">
          <el-button style="width: 110px" size="medium">
            批量操作<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="audit">用途</el-dropdown-item>
            <el-dropdown-item command="import">启用</el-dropdown-item>
            <el-dropdown-item command="export">禁用</el-dropdown-item>
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button style="width: 100px; margin-left: 10px" size="medium" @click="handleImport">导入</el-button>
        <el-button size="medium" style="width: 100px" @click="exportWay">导出</el-button>
      </div>
      <LPTablePage
        ref="tablePage"
        :show-index="true"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        :selection="true"
        :selectable="selectable"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template slot="status" slot-scope="{ row }">
          <el-switch v-model="row.status" :active-value="0" :inactive-value="1" />
        </template>
      </LPTablePage>
    </div>
    <!-- 编辑or新增 -->
    <base-dialog
      :visible="addVisile"
      :title="(isEdit ? '编辑' : '新增') + '地点'"
      width="918px"
      class="addDictDialog"
      @handleDialogSubmit="handleAddSubmit"
      @handleDialogCancle="handleAddCancle"
    >
      <el-form
        ref="dictForm"
        :model="dictModel"
        :rules="ruleRule"
        label-width="120px"
        class="dictForm"
        label-position="top"
        size="medium"
      >
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="地点用途:" prop="useTo">
              <el-checkbox-group v-model="dictModel.useTo">
                <el-checkbox v-for="item in useOptions" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点类型:" prop="type">
              <el-radio-group v-model="dictModel.type">
                <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="地点名称:" prop="name">
              <el-input v-model="dictModel.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大核载:" prop="nuclearPayload">
              <el-input v-model="dictModel.nuclearPayload" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="是否启用:" prop="status">
              <el-switch v-model="dictModel.status" :active-value="0" :inactive-value="1" />
              <span class="ml20">关闭后在系统停止使用</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" />
        </el-row>
      </el-form>
    </base-dialog>
    <!-- 批量编辑地点用途 -->
    <base-dialog
      :visible="batchEditVisile"
      title="批量编辑地点用途"
      width="640px"
      class="batchEditDialog"
      @handleDialogSubmit="handleBatchEditSubmit"
      @handleDialogCancle="handleBatchEditCancle"
    >
      <el-form
        ref="batchEditForm"
        :model="batchEditModel"
        label-width="120px"
        :rules="ruleRule"
        size="medium"
        label-position="top"
        style="margin-left: 20px"
      >
        <el-row :gutter="50">
          <el-col :span="22">
            <el-form-item label="选择地点用途" prop="useTo">
              <el-checkbox-group v-model="batchEditModel.useTo">
                <el-checkbox v-for="item in useOptions" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="22">
            <el-form-item label="操作方式" prop="operationMode">
              <el-radio-group v-model="batchEditModel.operationMode">
                <el-radio label="override">覆盖</el-radio>
                <el-radio label="add">增加</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
    <!-- 导入 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip text-center">
          <div slot="tip" class="el-upload__tip">
            <!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 -->
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { validateNumber } from '@/utils/validate'
import { getNewToken } from '@/utils/auth'
import baseDialog from '@/components/BaseDialog'
import SearchBar from '@/components/SearchBar'
import LPTablePage from '@/components/LPTablePage'
import ProcessDots from '@/components/ProcessDots'
import { logininforList, delLogininfor, cleanLogininfor } from '@/api/system/logs'
import beiGangApi from '@/api/logistics/beigang'
import { addDateRange } from '@/utils/ruoyi'

// import {auditSuccess,auditReject} from "@/api/customer";

export default {
  name: 'Location',
  components: {
    LPTablePage,
    SearchBar,
    baseDialog,
    ProcessDots
  },
  data() {
    return {
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getNewToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/logistics/location/importData'
      },
      exportInfoDailog: false,
      batchEditVisile: false,
      batchEditModel: {
        useTo: [],
        operationMode: ''
      },
      useOptions: [],
      typeOptions: [],
      accountQueryList: [],
      auditParams: {},
      addVisile: false,
      auditVisile: false,
      auditList: [],
      isEdit: false,
      dictModel: {
        useTo: []
      },
      searchModel: { typeList: [] },
      timeout: null, // 定时器，用于控制请求频率
      searchData: [
        {
          prop: 'useTo',
          type: 'select',
          placeholder: '用途',
          options: []
        },
        {
          prop: 'typeList',
          type: 'select',
          placeholder: '类型',
          multiple: true,
          options: []
        },
        {
          prop: 'name',
          type: 'input',
          placeholder: '地点名称'
        },
        {
          prop: 'status',
          type: 'select',
          placeholder: '是否启用',
          options: [
            { label: '启用', value: '0' },
            { label: '禁用', value: '1' }
          ]
        },
        {
          prop: 'search',
          type: 'button',
          policy: ['system.log.query']
        }
      ],
      tableData: [],
      tableColumn: [
        { label: '用途', prop: 'useToNames' },
        { label: '类型', prop: 'typeName' },
        { label: '地点名称', prop: 'name' },
        { label: '核载(吨)', prop: 'nuclearPayload' },
        { label: '是否启用', prop: 'status', render: true },
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createBy' },
        {
          label: '操作',
          prop: 'action',
          fixed: 'right',
          type: 'button',
          width: 170,
          buttons: [
            {
              label: '编辑',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: 'handleEdit'
            },
            {
              label: '删除',
              type: 'text',
              color: '#ee3333',
              method: 'handleDelete'
            }
          ]
        }

        //  {
        //     label: "操作",
        //     prop: "action",
        //     type: "button",
        //     hideTooLtip:true,
        //     width:180,
        //     button:[
        //         {
        //             label: "查看",
        //             type: "text",
        //             icon: "el-icon-view",
        //             method:`_detail${this.$options.name}`
        //         },
        //         {
        //             label: "通过",
        //             type: "text",
        //             icon: "el-icon-view",
        //             hide:'isCanTakeAudit',
        //             // hide:'canTakeAudit',
        //             hideValue:[false],
        //             policy:['Crm.CluePoolManage.TakeAudit'],
        //             method:`_auditSuccess${this.$options.name}`
        //         },
        //         {
        //             label: "驳回",
        //             type: "text",
        //             icon: "el-icon-view",
        //             hide:'isCanTakeAudit',
        //             // hide:'canTakeAudit',
        //             hideValue:[false],
        //             policy:['Crm.CluePoolManage.TakeAudit'],
        //             method:`_auditFail${this.$options.name}`
        //         },
        //     ]
        //  }
      ],
      total: 0,
      currentPage: 1,
      selectArr: [],
      allotVisile: false,
      settingVisile: false,
      ruleModel: {},
      ruleRule: {
        useTo: [{ required: true, trigger: 'blur', message: '必填' }],
        type: [{ required: true, trigger: 'change', message: '必选' }],
        name: [{ required: true, trigger: 'blur', message: '必填' }],
        nuclearPayload: [{ required: false, trigger: 'blur', message: '必填' }],
        auditStatus: [{ required: true, trigger: 'change', message: '必选' }],
        operationMode: [{ required: true, trigger: 'change', message: '必选' }]
      },
      detailVisible: false,
      detailId: '',
      openSeaClueId: '',
      isCanTakeAudit: null
    }
  },
  mounted() {
    this.getLogisticsCompanyList()
    // 详情
    this.$bus.$on('handleDetail', (rows) => {
      this.$router.push({ path: `/logistics/beiGang/getlocationDetail/${rows.locationId}` })
    })
    // 编辑
    this.$bus.$on('handleEdit', (rows) => {
      beiGangApi.getlocationDetail(rows.locationId).then((res) => {
        if (res.code == 200) {
          this.dictModel = {
            ...res.data,
            useTo:
              typeof res.data.useTo === 'string' ? res.data.useTo.split(',').map(Number) : res.data.useTo.map(Number),
            status: Number(res.data.status)
          }
          console.log(this.dictModel)

          this.addVisile = true
          this.isEdit = true
          this.ruleRule.nuclearPayload[0].required = true
        }
      })
    })
    // 审核
    // this.$bus.$on('handleAudit', (rows) => {
    //   const arr = []
    //   arr.push(rows)
    //   this.auditList = arr
    //   this.auditVisile = true

    //   // this.$router.push({ path: `/system/msg/edit/${rows.id}` })
    // })

    // 删除
    this.$bus.$on('handleDelete', (rows) => {
      this.$confirm('确定删除吗', '取消', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        closeOnClickModal: false
      }).then(() => {
        //   console.log('确认');
        beiGangApi.delLocation(rows.locationId).then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getLogisticsCompanyList()
          }
        })
      })
    })
  },
  destroyed() {
    this.$bus.$off('handleDetail')
    this.$bus.$off('handleDelete')
    this.$bus.$off('handleEdit')
    this.$bus.$off('handleAudit')
  },
  methods: {
    // 导入
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '地点导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('logistics/location/importTemplate', {}, `地点管理_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true }
      )
      this.getLogisticsCompanyList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 导出
    exportWay() {
      this.download(
        'logistics/location/export',
        {
          ...this.searchData
        },
        `地点管理_${new Date().getTime()}.xlsx`
      )
    },
    /* 企业查询模糊搜索相关 start*/
    // beiGangApi.logisticsCompanyFuzzySearch(query)
    querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(async () => {
        if (queryString) {
          try {
            // 调用接口获取数据
            const results = await this.fetchRemoteData(queryString)
            // const results1 = results .filter(item => item.includes(queryString))
            // 将获取的数据传递给回调函数cb
            cb(results)
          } catch (error) {
            console.error('Fetch error:', error)
            cb([]) // 如果出错，传递一个空数组
          }
        } else {
          cb([]) // 如果queryString为空，传递一个空数组
        }
      }, 500) // 设置延时来减少请求频率
    },
    async fetchRemoteData(query) {
      const result = await beiGangApi.logisticsCompanyFuzzySearch({ companyName: query })
      // 模拟接口调用，实际应用中需要替换为真实的API调用
      const res1 = result.filter((item) => item.companyName.includes(query))
      return res1.map((itm) => {
        return {
          ...itm,
          value: itm.companyName
        }
      })
    },
    // 关联用户帐号模拟查询操作
    getAccountQueryListWay(query) {
      beiGangApi.getAccountQueryList({ phone: query }).then((res) => {
        if (res.code == 200) {
          this.accountQueryList = res.data
        }
      })
    },
    handleSelect(item) {
      this.dictModel.unifiedSocialCreditCode = item.unifiedSocialCreditCode

      this.dictModel.legalPerson = item.legalPerson
      this.dictModel.area = item.area
      this, (this.dictModel.detailedAddress = item.detailedAddress)
    },

    /* 企业查询模糊搜索相关 end*/

    // 批量操作
    handleCommand(command) {
      if (this.selectArr.length == 0) {
        this.$message.warning('请先勾选')
        return
      }
      const len = this.selectArr.length
      let title = '启用'
      let content = '确定要启用吗？'
      switch (command) {
        // 用途
        case 'audit':
          this.auditWay()
          break
        // 启用
        case 'import':
          if (len >= 1) {
            title = '批量启用'
            content = `已选择${len}项，确定要启用吗？`
          }
          this.setEnabled({
            status: 0,
            content,
            title
          })
          break
        // 禁用
        case 'export':
          if (len >= 1) {
            title = '批量禁用'
            content = `已选择${len}项，确定要禁用吗？`
          }
          this.setEnabled({
            status: 1,
            content,
            title
          })
          break
        // 删除
        case 'delete':
          if (len >= 1) {
            title = '批量删除'
            content = `已选择${len}项，确定要删除吗？`
          }
          this.setDel()
          break
      }
    },
    // 批量编辑地点
    auditWay() {
      this.batchEditVisile = true
      this.batchEditModel.useTo = []
      this.batchEditModel.operationMode = 'add'
    },
    handleBatchEditSubmit() {
      this.$refs.batchEditForm.validate((valid) => {
        if (valid) {
          const idList = this.selectArr.map((item) => item.locationId)
          const query = {
            idList: idList,
            ...this.batchEditModel
          }
          if (this.batchEditModel.operationMode === 'override') {
            this.batchUpdateUseTo(query)
          } else if (this.batchEditModel.operationMode === 'add') {
            this.batchAddUseTo(query)
          }
        }
      })
    },
    // 覆盖
    batchUpdateUseTo(query) {
      beiGangApi
        .batchUpdateUseTo(query)
        .then((res) => {
          if (res.code === 200) {
            // 重置表单模型
            this.batchEditModel = this.$options.data().batchEditModel
            this.$message.success('添加成功')
            this.batchEditVisile = false
            this.$refs.tablePage.clearSelection()
            this.getLogisticsCompanyList()
          } else {
            this.$message.error('添加失败')
          }
        })
        .catch((error) => {
          console.error('更新位置时出现错误:', error)
          this.$message.error('添加失败')
        })
    },
    // 增加
    batchAddUseTo(query) {
      beiGangApi
        .batchAddUseTo(query)
        .then((res) => {
          if (res.code === 200) {
            // 重置表单模型
            this.batchEditModel = this.$options.data().batchEditModel
            this.$message.success('覆盖成功')
            this.batchEditVisile = false
            this.$refs.tablePage.clearSelection()
            this.getLogisticsCompanyList()
          } else {
            this.$message.error('覆盖失败')
          }
        })
        .catch((error) => {
          console.error('覆盖位置时出现错误:', error)
          this.$message.error('覆盖失败')
        })
    },
    handleBatchEditCancle() {
      this.batchEditVisile = false
    },
    // 批量禁启用操作
    setEnabled(obj) {
      console.log(this.selectArr, 'selectArr content')
      const idList = this.selectArr.map((item) => {
        return item.locationId
      })

      this.$confirm(obj.content, obj.title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        closeOnClickModal: false
      }).then(() => {
        const query = {
          idList: idList,
          status: obj.status
        }

        beiGangApi
          .batchUpdateStatus(query)
          .then((res) => {
            if (res.code == 200) {
              // 检查响应码
              this.$message.success('操作成功')
              this.getLogisticsCompanyList()
              this.$refs.tablePage.clearSelection()
            } else {
              this.$message.error('操作失败')
            }
          })
          .catch((error) => {
            console.error('更新状态时出现错误:', error)
            this.$message.error('操作失败')
          })
      })
    },

    // 批量删除操作
    setDel() {
      if (this.selectArr.length == 0) {
        this.$message.warning('请先勾选')
        return
      }
      let content = '确定删除吗'
      let title = '删除'
      if (this.selectArr.length >= 1) {
        title = '批量删除'
        content = `已选择${this.selectArr.length}项，确定要删除吗？`
      }
      this.$confirm(content, title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        closeOnClickModal: false
      }).then(() => {
        const idList = this.selectArr.map((item) => item.locationId)

        beiGangApi.delLocation(idList).then((res) => {
          if (res.code == 200) {
            this.$message.success('操作成功')
            this.getLogisticsCompanyList()
            this.$refs.tablePage.clearSelection()
          }
        })
      })
    },
    // 创建司机
    add() {
      this.isEdit = false
      this.addVisile = true
    },
    handleAddSubmit() {
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          const obj = {
            ...this.dictModel,
            useTo: this.dictModel.useTo.join(',')
          }
          if (!this.isEdit) {
            console.log(obj)

            beiGangApi.addLocation(obj).then((res) => {
              if (res.code == 200) {
                this.dictModel = this.$options.data().dictModel
                this.$message.success('添加成功')
                this.addVisile = false
                this.getLogisticsCompanyList()
              }
            })
          } else {
            beiGangApi.updateLocation(obj).then((res) => {
              if (res.code == 200) {
                // this.dictModel = this.$options.data().dictModel
                console.log(this.dictModel)

                this.$message.success('编辑成功')
                this.addVisile = false
                this.getLogisticsCompanyList()
              }
            })
          }
        } else {
          this.$message.warning('请检查字典信息')
          return false
        }
      })
    },
    handleAddCancle() {
      this.dictModel = this.$options.data().dictModel
      this.resetForm('dictForm')
      this.addVisile = false
    },
    // 审核操作
    // handleAuditSubmit() {
    //   this.$refs.auditParams.validate((valid) => {
    //     if (valid) {
    //       const arr = this.auditList.map((item) => {
    //         return {
    //           id: item.id,
    //           ...this.auditParams
    //         }
    //       })
    //       beiGangApi.updateLogisticsCompanyList(arr).then((res) => {
    //         if (res.code == 200) {
    //           this.$message.success('审核成功')
    //           this.auditVisile = false
    //           this.auditList = []
    //           this.auditParams = this.$options.data().auditParams
    //           this.getLogisticsCompanyList()
    //         }
    //       })
    //     }
    //   })
    // },
    // handleAuditCancle() {
    //   this.auditParams = this.$options.data().auditParams
    //   this.resetForm('auditParams')
    //   this.auditVisile = false
    // },

    getLogisticsCompanyList() {
      // addDateRange

      const { pageSize } = this.$refs.tablePage
      const params = {
        ...this.searchModel,
        pageSize: pageSize,
        pageNum: this.currentPage
      }
      const obj = addDateRange(params, this.searchModel.loginTime)
      delete obj.loginTime
      console.log(obj)

      // logininforList
      beiGangApi.locationList(obj).then((res) => {
        if (res.code == 200) {
          this.total = res.total
          this.tableData = res.rows.map((row) => {
            return {
              ...row,
              status: parseInt(row.status, 10)
            }
          })
        }
      })
      beiGangApi.getDictLocationUse().then((res) => {
        if (res.code == 200) {
          const options = res.data.map((item) => ({
            label: item.dictValue,
            value: item.id
          }))
          this.searchData.find((data) => data.prop === 'useTo').options = options
          this.useOptions = res.data.map((item) => ({
            label: item.dictValue,
            value: item.id
          }))
        }
      })
      beiGangApi.getDictLocationType().then((res) => {
        if (res.code == 200) {
          const options = res.data.map((item) => ({
            label: item.dictValue,
            value: item.id
          }))
          this.searchData.find((data) => data.prop === 'typeList').options = options
          this.typeOptions = res.data.map((item) => ({
            label: item.dictValue,
            value: item.id
          }))
        }
      })
    },
    selectable(row, index) {
      return true
    },

    handleSearchSubmit() {
      this.currentPage = 1
      this.getLogisticsCompanyList()
    },
    handleSearchReset() {
      this.currentPage = 1
      this.$refs.tablePage.clearSelection()
      this.getLogisticsCompanyList()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getLogisticsCompanyList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getLogisticsCompanyList()
    },
    handleSelectionChange(v) {
      console.log('handleSelectionChange', v)
      this.selectArr = v
    },
    allot() {
      this.$modal
        .confirm('是否确认清空所有登录日志数据项？')
        .then(function () {
          return cleanLogininfor()
        })
        .then(() => {
          this.getLogisticsCompanyList()
          this.$modal.msgSuccess('清空成功')
        })
        .catch(() => {})
    },

    gethtml(value) {
      if (value == null) {
        return
      }
      var list = value.split(',')
      var resultStr = ''
      list.forEach((item) => {
        if (item.includes('高') || item.includes('重要')) {
          resultStr = resultStr + "<span style='color:#EE3333'>" + item + '</span>,'
        } else {
          resultStr = resultStr + item + ','
        }
      })
      if (resultStr != '') {
        return resultStr.slice(0, -1)
      }
    },
    showSettign() {
      getOpenSeaSetting().then((res) => {
        if (!res.error) {
          console.log('getOpenSeaSetting', res)
          this.ruleModel = res
          this.settingVisile = true
        }
      })
    },
    handleSettingSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('ruleModel', this.ruleModel)
          putOpenSeaStting(this.ruleModel).then((res) => {
            if (!res.error) {
              this.$message.success('保存设置成功')
              this.settingVisile = false
            }
          })
        } else {
          return false
        }
      })
    },
    handleSettingCancle() {
      this.settingVisile = false
    },
    detailClose() {
      this.detailVisible = false
      this.getLogisticsCompanyList()
    },
    handleAllot() {
      this.allotVisile = true
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.location {
  // padding: 0 .2rem .2rem;
  .top {
    background-color: #fff;
    padding: 0 0.3rem;
  }

  .bottom {
    .btn_area {
      margin-bottom: 0.2rem;
      margin-left: 0.3rem;
    }

    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0.2rem 0rem;
  }

  .green {
    color: #2cad00;
  }

  .orage {
    color: #ee7533;
  }

  .blue {
    color: #0076ff;
  }

  .red {
    color: #ff3333;
  }
}
::v-deep .el-dialog .el-dialog__body {
  padding: 30px 20px;
}
</style>
